
.qui-grids{
  display: flex;
  flex-wrap: wrap;
  margin-right: -2px;
  overflow: hidden;
}
.hem{
	display: flex;
	flex-wrap: wrap;
	flex: 1;
}
.qui-grid{
  position: relative;
  display: flex;
  flex-direction: column;
  width: 33.333%;
}

.bor-1px-r.fgs{
  &::before{
    height: 50%;
    top: 50%;
    transform: translateY(-50%);
  }
}
.qui-grids.border{
	.qui-grid{
		&::before{
			content: '';
			position: absolute;
			z-index: 2;
			transform-style: preserve-3d;
			left: 0;
			top: 0;
			right: 0;
			height: 0;
			border-top: 1px solid $borderColor;
			transform: scaleY(0.5);
		}
		&::after{
			content: '';
			position: absolute;
			z-index: 2;
			transform-style: preserve-3d;
			right: 0;
			top: 0;
			bottom: 0;
			width: 0;
			border-left: 1px solid $borderColor;
			transform-origin: 0 0;
			transform: scaleX(0.5);
		}
	}
	
	
}
.qui-grids.borderX{
	.qui-grid{
		&::before{
			content: '';
			position: absolute;
			z-index: 2;
			transform-style: preserve-3d;
			left: 0;
			top: 0;
			right: 0;
			height: 0;
			border-top: 1px solid $borderColor;
			transform: scaleY(0.5);
		}
	}
	
	
}
.qui-grids.borderY{
	.qui-grid{
		&::after{
			content: '';
			position: absolute;
			z-index: 2;
			transform-style: preserve-3d;
			right: 0;
			top: 0;
			bottom: 0;
			width: 0;
			border-left: 1px solid $borderColor;
			transform-origin: 0 0;
			transform: scaleX(0.5);
		}
	}
}
.qui-grids.fgs{
	.qui-grid{
		&::after{
			content: '';
			position: absolute;
			z-index: 2;
			transform-style: preserve-3d;
			height: 50%;
			right: 0;
			top: 50%;
			bottom: 0;
			width: 0;
			border-left: 1px solid $borderColor;
			transform-origin: 0 0;
			transform: scaleX(0.5);
			transform: translateY(-50%);
		}
	}
}


/*列数*/
$colList: 2, 3, 4, 5, 6, 7;
@each $item in $colList {
	.column#{$item}{
	  .qui-grid{
	    width: (100%/$item);
	  }
	}
}

/*padding*/
$pdList: 5, 10, 15, 20, 30, 40;
@each $item in $pdList {
	.gutter#{$item}{
		.qui-grid{
		  padding: #{$item}upx;
		}
		.hem{
			margin: #{-$item}upx;
		}
	}
	.gutter#{$item}-tb{
		.qui-grid{
		  padding-top: #{$item}upx;
		  padding-bottom: #{$item}upx;
		}
		.hem{
			margin-top: #{-$item}upx;
			margin-bottom: #{-$item}upx;
		}
	}
}